<template>

    <a-card title="停车订单列表" :bordered="false">


        <!-- 表格开始 -->
        <a-table :columns="columns"
                 :rowKey="record => record.id"
                 :dataSource="dataSource"
                 :pagination="pagination"
                 :loading="loading" @change="handleTableChange"
                 :scroll="{ x: 'calc(700px + 50%)' }"
                 :bordered="true"
                 size="small"
        >

            <!--车辆-->
            <template slot="vehicleInfo" slot-scope="text, record">
                <b class="text-pink">{{record.plateNo}}</b>
                <p title="车辆类型">{{record.typeName}}</p>
            </template>

            <!--车位-->
            <template slot="placeName" slot-scope="text, record">

                <b title="车位编号" class="text-pink">{{record.seatCode}}</b>
                <p class="text-blue">{{record.placeName}}</p>
            </template>
            <!--时间-->
            <template slot="timeSlot" slot-scope="text, record">
                <p title="车辆进场时间">
                    <a-icon type="arrow-right" class="text-blue"/>
                    {{record.entryTime}}
                </p>
                <p title="车辆离场时间" v-if="record.exitTime">
                    <a-icon type="arrow-left" class="text-success"/>
                    {{record.exitTime}}
                </p>
            </template>

            <template slot="needPayAttr" slot-scope="text, record">
                <span :class=" 'text-'+record.needPayAttr ">{{$exMod.findDict(NeedPayAttrOPT,record.needPayAttr)}}</span>
            </template>

            <template slot="stayStatus" slot-scope="text, record">
                <span :class=" 'text-'+record.stayStatus ">{{$exMod.findDict(StayStatusOPT,record.stayStatus)}}</span>
            </template>


            <!--其他属性-->
            <template slot="otherSlot" slot-scope="text, record">

                <a-tag color="pink" v-if="record.reviewStatus >0">问题单</a-tag>
                <a-tag color="red" v-if="record.OrderExitAttr==='E02' ">预付离场</a-tag>
                <a-tag color="orange" v-if="!$exMod.isEmptyString(record.timeoutDuration) ">超时单</a-tag>
                <a-tag color="green" v-if="record.source !=='ROBOT' ">人工单</a-tag>
            </template>
            <!--操作扩展-->
            <template slot="operation" slot-scope="text, record">
                <a @click="openDetailModal(record)">详情</a>
                <a-divider type="vertical"/>

                <a-dropdown>
                    <a class="ant-dropdown-link">维护
                        <a-icon type="down"/>
                    </a>
                    <a-menu slot="overlay">
                        <a-menu-item key="0">
                            <a @click="openChangePlateNo(record)">修改车牌</a>
                        </a-menu-item>
                        <a-menu-divider/>
                        <a-menu-item key="1">
                            <a @click=openChangeFee(record)>减免费用</a>
                        </a-menu-item>


                    </a-menu>
                </a-dropdown>


            </template>


        </a-table>
        <DetailModal :detailRecord="detailRecord" v-if="detailShow" @closeModal="closeDetailModal"/>

        <PlateNoModal :record="PlateNoModalRecord" v-if="PlateNoModalShow" @closeModal="closePlateNoModal"/>


        <FeeModal :record="FeeModalRecord" v-if="FeeModalShow" @closeModal="closeFeeModal"/>

    </a-card>
</template>
<script>
    import {pagination, orderListTable} from '../public/colums.js';
    import {OrderMainList} from '../public/http.js';
    import {dictLoad} from '../../../util/internal.api';

    export default {
        components: {
            PlateNoModal: () => import('./plate'),
            FeeModal: () => import('./fee'),
            DetailModal: () => import('./detail'),

        },
        data() {
            return {

                PlateNoModalShow: false,
                PlateNoModalRecord: {},

                FeeModalShow: false,
                FeeModalRecord: {},


                editShow: false, //打开编辑器
                editRecord: {}, //正在编辑的记录

                detailRecord: {}, //打开的详情对象
                detailShow: false, //详情窗口显示控制器

                dataSource: [],
                pagination: {
                    ...pagination
                }, //复制预设的分页参数
                loading: false, //表格loading
                columns: orderListTable, //表头管理
                searchForm: {},
                NeedPayAttrOPT: [], //订单计费属性
                StayStatusOPT: [], //车辆停放状态数据字典


            };
        },
        methods: {

            closePlateNoModal(e) {

                this.PlateNoModalShow = false;
                this.PlateNoModalRecord = {};
                e.render ? this.getTableList() : null;

            },

            openChangePlateNo(record) {
                this.PlateNoModalShow = true;
                this.PlateNoModalRecord = record;
            },

            openChangeFee(record) {
                if (record.stayStatus === "T") {
                    this.$notification.error({
                        message: '禁止操作',
                        description: '未出场的车辆禁止减免费用'
                    })
                    return false;
                }


                if (record.needPayAttr === "F") {
                    this.$notification.error({
                        message: '禁止操作',
                        description: '免费单禁止减免费用'
                    })
                    return false;
                }


                if (record.arrearsFee <= 0) {
                    this.$notification.error({
                        message: '禁止操作',
                        description: '当前订单无需支付 禁止减免费用'
                    })
                    return false;
                }


                this.FeeModalShow = true;
                this.FeeModalRecord = record;
            },

            closeFeeModal(e) {
                this.FeeModalShow = false;
                this.FeeModalRecord = {};
                e.render ? this.getTableList() : null;
            },


            openDetailModal(record) {
                this.detailShow = true;
                this.detailRecord = record;


            },

            closeDetailModal(e) {
                this.detailShow = false;
                this.detailRecord = {};
                e.render ? this.getTableList() : null;
            },

            searchRest() {
                this.searchForm = {
                    code: '',
                    name: '',
                    description: '',
                }
                this.getTableList()
            },
            //1.0 获取表格数据
            getTableList() {
                this.loading = true;
                let searchData = this.$exMod.filterObjEmpty(this.searchForm); //删除对象中的空值
                OrderMainList(this.pagination, searchData).then(res => {
                    this.loading = false;
                    if (res.code === 0) {
                        this.dataSource = res.data.result; //表格数据
                        this.pagination.total = res.data.total; //总记录条数
                    }
                });
            },
            //1.2翻页监听
            handleTableChange(pagination) {
                this.pagination.current = pagination.current;
                this.pagination.pageSize = pagination.pageSize;
                this.getTableList();
            },
            //2.0打开编辑器
            openEdit(obj = {}) {
                this.editRecord = obj;
                this.editShow = true;
            },
            //2.1 关闭编辑器
            closeEdit(e) {
                this.editShow = false;
                if (e.render) {
                    this.getTableList();
                }
            },
            //3.0 搜索提交
            searchSubmit() {
                this.pagination.current = 1;
                this.getTableList();
            },

            //数据初始化
            async init() {
                dictLoad("NeedPayAttr").then(res => this.NeedPayAttrOPT = res);
                dictLoad("StayStatus").then(res => this.StayStatusOPT = res);
                this.getTableList();
            }
        },
        created() {
            this.init();
        }
    };
</script>
